<template>
  <div class="usercenter-box">
    <div class="common-usercenter-box">
      <h6 class="common-title">推广</h6>
      <div class="myorderbox common-form-set">
        <section>
                <div class="row">
                  <span>注册推广链接：</span>
                  <a :href="url" target="_blank">{{ url }}</a>
                </div>
                <div class="row">
                  <span>二维码链接：</span>
                  <div v-if="codeUrl" style="display: inline-block">
                    <img :src="codeUrl" />
                  </div>
                </div>
                <div class="row">
                  <span>分享链接</span>
                  <div style="display: inline-block;" ref="share"></div>
                </div>
                <el-button v-if="supportCopy" ref="copyBtn" :data-clipboard-text="url"
                  >复制链接</el-button
                >
              </section>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ClipboardJS from 'clipboard'
import QRCode from 'qrcode'

const options = {
  errorCorrectionLevel: 'H',
  margin: 1
  // type: 'image/jpeg',
  // quality: 1,
  // color: {
  //   dark: '#010599FF',
  //   light: '#FFBF60FF'
  // }
}

export default {
  layout: 'webIn4',
  data() {
    return {
      supportCopy: false,
      url: '',
      codeUrl: ''
    }
  },
  computed: {
    ...mapState({
      user: (state) => state.user
    })
  },
  async mounted() {
    this.url = `${location.origin}/register?parentNo=${this.user.localUserID}`
    this.codeUrl = await QRCode.toDataURL(this.url, options)
    this.supportCopy = ClipboardJS.isSupported()
    this.$nextTick(() => {
      const clipboard = new ClipboardJS(this.$refs.copyBtn.$el)
      clipboard.on('success', (e) => {
        this.$message({
          message: '复制成功！',
          type: 'success'
        })
        e.clearSelection()
      })

      clipboard.on('error', () => {
        this.$message.error('复制失败，请手动复制链接！')
      })
    })
    this.$refs.share.innerHTML =
      '<div class="bshare-custom icon-medium"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div>'
    const a = document.createElement('SCRIPT')
    a.src =
      'http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh'
    document.body.appendChild(a)
    a.onload = () => {
      const b = document.createElement('SCRIPT')
      b.src = 'http://static.bshare.cn/b/bshareC0.js'
      document.body.appendChild(b)
      b.onload = () => {
        window.bShare.addEntry({
          url: this.url
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style8/common.css';
@import 'assets/style/style8/style.css';
@import 'assets/style/style8/font_1451715_0505c2bxv7b7.css';
</style>
